<template>
  <div>
      <acManageTitle>
        <template #right>
          <span class="rightName">设置</span>
        </template>
      </acManageTitle>
    <div id="main">
      <fieldset>
        <legend>用戶信息</legend>
        <div id="detail">
          <div class="account">
            <label>
              用戶賬號:
              <input type="text" v-model="name" disabled>
            </label>
          </div>
          <div class="password">
            <label>
              用戶密碼:
              <input type="password" v-model="pwd">
            </label>
          </div>
          <div class="modify" @click="modify">修改</div>
        </div>
      </fieldset>
    </div>
  </div>
</template>

<script>
import acManageTitle from "@/components/acManageTitle.vue";
export default {
  name: "settings",
  data(){
    return {
      name:"",
      pwd:""
    }
  },
  components:{
    acManageTitle
  },
  mounted() {
    //拿到user的憑證，然後向後端發送請求
  },
  methods:{
    modify(){
      // alert(1)
    }
  }
}
</script>

<style lang="less" scoped>
.rightName {
  font-size: 0.52rem;
  color: #fbb40a;
}
#main{
  width: 100vw;
  height: 90vh;
  background-color: #b41e1d;
  position: relative;
  fieldset{
    width: 60vw;
    height: 60vh;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 10vh;
    border-radius: 20px;
    background-color: #c41e1d;
    legend{
      font-size: 30px;
      color: #f5d858;
    }
    #detail{
      //background-color: #d37401;
      height: 100%;
      width: 100%;
      .account,
      .password{
        display: block;
        height: 50%;
        width: 100%;
        //background-color: #d30000;
        position: relative;
        label{
          display: block;
          width: 300px;
          height: 50px;
          line-height: 50px;
          text-align: center;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
          letter-spacing: 4px;
          font-size: 20px;
          //background-color: #f5d858;
        }
      }
      .modify{
        position: absolute;
        right: 120px;
        bottom: 60px;
        color: #f5d858;
        text-shadow: 3px 3px 10px white;
        width: 60px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border-radius: 15px;
        background-color: rgba(255,200,20,.5);
        &:hover{
          background-color: #b41e1d;
          color:white;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
